<style lang="less">
  .self-extract {
    .el-table {
      .el-icon-check {
        display: none;
      }
      .current-row {
        .el-icon-check {
          display: inline-block;
        }
      }
    }
    .el-date-editor {
      width: 70%;
    }
    .el-table .info-row {
      background: #FFAEB9;
    }
    .el-table .info-row-ageing {
      background: #FF6464;
    }
    .el-table .info-row-ageing-error {
      background: rebeccapurple;
    }
    .f-w70 {
      width: 70%;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .el-upload-wh {
      div {
        width: 78px;
      }
    }
    .f-w80 {
      position: absolute;
      margin-top: -6px;
      width: 80px;
    }
  }
  .special-delivery-top{
    background-color: red;
    margin-bottom: 5px;
    height: 35px;
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
    .top-img{
      height: 30px;
      width: 30px;
      vertical-align: middle;
      padding-right: 10px;
    }
  }
</style>

<template>
  <div class="self-extract">
    <div id="special-delivery-top" class="special-delivery-top" v-bind:style="ageingDisplay">
      <img class="top-img" src="../../assets/warning.png"/>您有{{topWarningNum}}笔订单逾期未签收，请及时处理
    </div>
    <el-tabs v-model="tabType" @tab-click="tabClick">
      <el-tab-pane name="wddzt" label="未到待自提">
        <el-form ref="searchForm" :model="searchForm" label-width="100px">
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item class="f-mb10" label="订单编号" prop="LIKE_orderNumber">
                <el-input class="f-w70" v-model="searchForm.LIKE_orderNumber"
                          placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人" prop="LIKE_sendContactName">
                <el-input class="f-w70" v-model="searchForm.LIKE_sendContactName"
                          placeholder="请输入收货人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人手机" prop="LIKE_sendContactPhone">
                <el-input class="f-w70" v-model="searchForm.LIKE_sendContactPhone"
                          placeholder="请输入收货人"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item label="订单日期">
                <el-date-picker
                  v-model="noSignDaterange"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="结算方式" prop="EQ_paymentType">
                <el-select class="f-w70"
                           v-model="searchForm.EQ_paymentType"
                           placeholder="请选择结算方式">
                  <el-option v-for="receivableType in $store.getters.PAY_WAY"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="运输方式" prop="EQ_agingDictEntityId">
                <el-select class="f-w70"
                           v-model="searchForm.EQ_agingDictEntityId"
                           placeholder="请选择运输方式">
                  <el-option v-for="receivableType in $store.getters.AGING_CLASSIFICATION"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-checkbox v-model="wddztCheckCondition.IsReceiptWay">回单</el-checkbox>
                <el-checkbox v-model="wddztCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                <el-checkbox v-model="wddztCheckCondition.noSignIsError">异常</el-checkbox>
                <el-checkbox v-model="wddztCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="f-mt f-wa">
          <el-button type="primary" @click="signVerifyClick" :disabled="noArrivedSelectedItem === null">签收确认
          </el-button>
          <el-button type="primary" @click="noArrivedaymentConfirmation" :disabled="noArrivedSelectedItem === null">收款确认
          </el-button>
          <el-button type="primary" @click="addError" :disabled="noArrivedSelectedItem === null">异常登记</el-button>
          <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20 f-mb10"
                     @click="wddztResetCondition">重置
          </el-button>
          <el-button type="primary" class="f-wa f-fr f-ml10 " @click="searchTableClick">查询</el-button>
        </div>
        <el-table :data="orderTableData"
                  highlight-current-row
                  @current-change="handleNoArrivedCurrentChange"
                  :row-class-name="tableRowClassNameToSignOff"
                  border>
          <el-table-column
            label="选中"
            width="65">
            <template slot-scope="scope">
              <i class="el-icon-check"></i>
            </template>
          </el-table-column>
          <el-table-column prop="order.orderNumber" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="order.createDate" label="下单日期" width="120">
            <template slot-scope="scope">
              {{scope.row.order.createDate.substr(0,10)}}
            </template>
          </el-table-column>
          <el-table-column prop="order.agingName" label="运输方式" width="100">
          </el-table-column>
          <el-table-column prop="order.paymentTypeName" label="结算方式" width="100">
          </el-table-column>
          <el-table-column label="运费金额" width="100">
            <template slot-scope="scope">
              <div>{{scope.row.order.orderPrice}}</div>
              <div>{{scope.row.order.payStatusName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="代收货款" width="100" align="center">
            <template slot-scope="scope">
              <label>{{scope.row.order.collectPaymentAmount||'—'}}</label><br>
              <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
              <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
            </template>
          </el-table-column>
          <el-table-column label="等通知放货" width="120" align="center">
            <template slot-scope="scope">
              {{scope.row.order.noticeDeliveryStatus === 101022001?'否':(scope.row.order.noticeDeliveryStatus === 101022002? '是':scope.row.order.noticeDeliveryStatusName)}}
            </template>
          </el-table-column>
          <el-table-column label="回单" width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.order.receipt||'—'}}
            </template>
          </el-table-column>
          <el-table-column label="货物信息">
            <template slot-scope="scope">
              {{scope.row.order.cargoNames}} | {{scope.row.order.amount}} 件
            </template>
          </el-table-column>
          <el-table-column prop="order.sendContactName" label="收货人" width="100">
          </el-table-column>
          <el-table-column prop="order.sendContactPhone" label="收货人手机" width="130">
          </el-table-column>
          <el-table-column prop="order.sendAddress" label="收货人地址" width="180">
          </el-table-column>
          <el-table-column label="异常累计" width="100">
            <template slot-scope="scope">
              {{scope.row.errorNum}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row.orderId)" type="primary">异常记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="f-mt10"
                       :current-page="currentPage"
                       :page-size="pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="total" style="float: right">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane name="yddzt" label="已到待自提">
        <el-form ref="searchArrivedForm" :model="searchArrivedForm" label-width="100px">
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item class="f-mb10" label="订单编号" prop="LIKE_orderNumber">
                <el-input class="f-w70" v-model="searchArrivedForm.LIKE_orderNumber"
                          placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人" prop="LIKE_sendContactName">
                <el-input class="f-w70" v-model="searchArrivedForm.LIKE_sendContactName"
                          placeholder="请输入收货人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人手机" prop="LIKE_sendContactPhone">
                <el-input class="f-w70" v-model="searchArrivedForm.LIKE_sendContactPhone"
                          placeholder="请输入收货人手机"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item label="订单日期">
                <el-date-picker
                  v-model="arrivedSignOffDaterange"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="结算方式" prop="EQ_paymentType">
                <el-select class="f-w70"
                           v-model="searchArrivedForm.EQ_paymentType"
                           placeholder="请选择结算方式">
                  <el-option v-for="receivableType in $store.getters.PAY_WAY"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="运输方式" prop="EQ_agingDictEntityId">
                <el-select class="f-w70"
                           v-model="searchArrivedForm.EQ_agingDictEntityId"
                           placeholder="请选择运输方式">
                  <el-option v-for="receivableType in $store.getters.AGING_CLASSIFICATION"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-checkbox v-model="yddztCheckCondition.IsReceiptWay">回单</el-checkbox>
                <el-checkbox v-model="yddztCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                <el-checkbox v-model="yddztCheckCondition.noSignIsError">异常</el-checkbox>
                <el-checkbox v-model="yddztCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="f-mt f-wa">
          <el-button type="primary" @click="arrivedSignVerifyClick" :disabled="arrivedSelectedItem === null">签收确认
          </el-button>
          <el-button type="primary" @click="arrivedaymentConfirmation" :disabled="arrivedSelectedItem === null">收款确认
          </el-button>
          <el-button type="primary" @click="arrivedSignOffAddError" :disabled="arrivedSelectedItem === null">异常登记</el-button>
          <el-button type="primary" @click="arrivedReset" class="f-wa f-fr f-ml10 f-mr20 f-mb10">重置
          </el-button>
          <el-button type="primary" @click="arrivedQuery" class="f-wa f-fr f-ml10 ">查询</el-button>
        </div>
        <el-table :data="yddztTableData"
                  highlight-current-row
                  @current-change="handleArrivedCurrentChange"
                  :row-class-name="tableRowClassNameToSignOff"
                  border>
          <el-table-column
            label="选中"
            width="65">
            <template slot-scope="scope">
              <i class="el-icon-check"></i>
            </template>
          </el-table-column>
          <el-table-column prop="order.orderNumber" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="order.createDate" label="下单日期" width="120">
            <template slot-scope="scope">
              {{scope.row.order.createDate.substr(0,10)}}
            </template>
          </el-table-column>
          <el-table-column prop="order.agingName" label="运输方式" width="100">
          </el-table-column>
          <el-table-column prop="order.paymentTypeName" label="结算方式" width="100">
          </el-table-column>
          <el-table-column label="运费金额" width="100">
            <template slot-scope="scope">
              <div>{{scope.row.order.orderPrice}}</div>
              <div>{{scope.row.order.payStatusName}}</div>
            </template>
          </el-table-column>
          <el-table-column label="代收货款" width="100" align="center">
            <template slot-scope="scope">
              <label>{{scope.row.order.collectPaymentAmount||'—'}}</label><br>
              <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
              <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
            </template>
          </el-table-column>
          <el-table-column label="等通知放货" width="120" align="center">
            <template slot-scope="scope">
              {{scope.row.order.noticeDeliveryStatus === 101022001?'否':(scope.row.order.noticeDeliveryStatus === 101022002? '是':scope.row.order.noticeDeliveryStatusName)}}
            </template>
          </el-table-column>
          <el-table-column label="回单" width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.order.receipt||'—'}}
            </template>
          </el-table-column>
          <el-table-column label="货物信息">
            <template slot-scope="scope">
              {{scope.row.order.cargoNames}} | {{scope.row.order.amount}} 件
            </template>
          </el-table-column>
          <el-table-column prop="order.sendContactName" label="收货人" width="100">
          </el-table-column>
          <el-table-column prop="order.sendContactPhone" label="收货人手机" width="130">
          </el-table-column>
          <el-table-column prop="order.sendAddress" label="收货人地址" width="180">
          </el-table-column>
          <el-table-column label="异常累计" width="100">
            <template slot-scope="scope">
              {{scope.row.errorNum}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row.orderId)" type="primary">异常记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="f-mt10"
                       :current-page="yddztCurrentPage"
                       :page-size="yddztPageSize"
                       @size-change="handleYddztSizeChange"
                       @current-change="handleYddztCurrentPageChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :total="yddztTotal" style="float: right">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane name="yzt" label="已自提">
        <el-form ref="searchYetForm" :model="searchYetForm" label-width="100px">
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item class="f-mb10" label="订单编号" prop="LIKE_orderNumber">
                <el-input class="f-w70" v-model="searchYetForm.LIKE_orderNumber"
                          placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人" prop="LIKE_sendContactName">
                <el-input class="f-w70" v-model="searchYetForm.LIKE_sendContactName"
                          placeholder="请输入收货人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="收货人手机" prop="LIKE_sendContactPhone">
                <el-input class="f-w70" v-model="searchYetForm.LIKE_sendContactPhone"
                          placeholder="请输入收货人手机"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="f-mb">
            <el-col :span="8">
              <el-form-item label="订单日期">
                <el-date-picker
                  v-model="signDaterange"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="结算方式" prop="EQ_paymentType">
                <el-select class="f-w70"
                           v-model="searchYetForm.EQ_paymentType"
                           placeholder="请选择结算方式">
                  <el-option v-for="receivableType in $store.getters.PAY_WAY"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item class="f-mb10" label="运输方式" prop="EQ_agingDictEntityId">
                <el-select class="f-w70"
                           v-model="searchYetForm.EQ_agingDictEntityId"
                           placeholder="请选择运输方式">
                  <el-option v-for="receivableType in $store.getters.AGING_CLASSIFICATION"
                             :label="receivableType.cnDictValname"
                             :key="receivableType.dictVal"
                             :value="receivableType.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-checkbox v-model="yztCheckCondition.IsReceiptWay">回单</el-checkbox>
                <el-checkbox v-model="yztCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                <el-checkbox v-model="yztCheckCondition.noSignIsError">异常</el-checkbox>
                <el-checkbox v-model="yztCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="f-mt f-wa">
          <el-button type="primary" class="f-wa" @click="cancelSignOff" :disabled="yetSelectedItem === null">取消签收</el-button>
          <el-button type="primary" @click="yztPaymentConfirmation" :disabled="yetSelectedItem === null">收款确认</el-button>
          <el-button type="primary" class="f-wa f-fr f-ml10 f-mr20 f-mb10"
                     @click="yztResetCondition">重置
          </el-button>
          <el-button type="primary" class="f-wa f-fr f-ml10 " @click="searchYetTableClick">查询</el-button>
        </div>
        <div class="f-mt10">
          <el-table :data="yetOrderTableData" height="550"
                    :row-class-name="tableRowClassName"
                    highlight-current-row
                    border
                    @current-change="handleYetCurrentChange">
            <el-table-column
              label="选中"
              width="65">
              <template slot-scope="scope">
                <i class="el-icon-check"></i>
              </template>
            </el-table-column>
            <el-table-column prop="order.orderNumber" label="订单编号" width="150">
            </el-table-column>
            <el-table-column prop="order.createDate" label="下单日期" width="120">
              <template slot-scope="scope">
                {{scope.row.order.createDate.substr(0,10)}}
              </template>
            </el-table-column>
            <el-table-column prop="order.agingName" label="运输方式" width="100">
            </el-table-column>
            <el-table-column prop="order.paymentTypeName" label="结算方式" width="100">
            </el-table-column>
            <el-table-column label="运费金额" width="100">
              <template slot-scope="scope">
                <div>{{scope.row.order.orderPrice}}</div>
                <div>{{scope.row.order.payStatusName}}</div>
              </template>
            </el-table-column>
            <el-table-column label="代收货款" width="100" align="center">
              <template slot-scope="scope">
                <label>{{scope.row.order.collectPaymentAmount||'—'}}</label><br>
                <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
                <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
              </template>
            </el-table-column>
            <el-table-column label="等通知放货" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.order.noticeDeliveryStatus === 101022001?'否':(scope.row.order.noticeDeliveryStatus === 101022002? '是':scope.row.order.noticeDeliveryStatusName)}}
              </template>
            </el-table-column>
            <el-table-column label="回单" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.order.receipt||'—'}}
              </template>
            </el-table-column>
            <el-table-column label="货物信息">
              <template slot-scope="scope">
                {{scope.row.order.cargoNames}} | {{scope.row.order.amount}} 件
              </template>
            </el-table-column>
            <el-table-column prop="order.sendContactName" label="收货人" width="100">
            </el-table-column>
            <el-table-column prop="order.sendContactPhone" label="收货人手机" width="130">
            </el-table-column>
            <el-table-column prop="order.sendAddress" label="收货人地址" width="180">
            </el-table-column>
            <el-table-column prop="signOffDate" label="签收日期" width="180">
            </el-table-column>
            <el-table-column label="签收人" width="120">
              <template slot-scope="scope">
                <div v-if="!scope.row.signOffName && !scope.row.signOffIDNumber">
                  —
                </div>
                <div v-else>
                  <div>{{scope.row.signOffName}}</div>
                  <div>{{scope.row.signOffIDNumber}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="代签人" width="180">
              <template slot-scope="scope">
                <div v-if="!scope.row.receiverName && !scope.row.receiverIDNumber">
                  —
                </div>
                <div v-else>
                  <div>{{scope.row.receiverName}}</div>
                  <div>{{scope.row.receiverIDNumber}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="异常签收情况" min-width="200">
              <template slot-scope="scope">
                <div v-if="!scope.row.signOffAbnormalTypeName && !scope.row.signOffAbnormalRemark">
                  —
                </div>
                <div v-else>
                  <div>{{scope.row.signOffAbnormalTypeName}}</div>
                  <div>{{scope.row.signOffAbnormalRemark}}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="异常累计" width="100">
              <template slot-scope="scope">
                {{scope.row.errorNum}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="showImageUrls(scope.row)"  :plain="true" type="info">单据记录</el-button>
                <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row.order.id)" type="primary">异常记录</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="f-mt10"
                         :current-page="yetCurrentPage"
                         :page-size="yetPageSize"
                         @size-change="yetHandleSizeChange"
                         @current-change="yetHandleCurrentChange"
                         layout="total,sizes,prev, pager, next, jumper"
                         :total="yetTotal" style="float: right">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog title="单据记录" :visible.sync="singedImgUrlVisiable" size="tiny" style="width: 2000px">
      <div>
        <el-form :model="uploadImgAfterSing" ref="uploadImgAfterSing">
          <el-form-item label="单据上传"  >
            <el-upload
              style="margin-left: 70px"
              action="/api/v2.0/admin/sign_off_test"
              list-type="picture-card"
              ref="singedUpload"
              :before-upload="beforeAvatarUpload"
              :on-success="handlePreview"
              :on-preview="handlePictureCardPreview"
              :file-list="fileList"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item style="margin-left: 70px">请上传有效费用单据图片，如客户货运单，联盟速运托运单，中转托运单等<br>图片最多不超过5张，只支持JPG/PNG图片格式，图片大小不大于2M</el-form-item>
          <el-form-item style="margin-left: 70px">
            <el-button :plain="true" type="info" @click="canaleAddImg">取消</el-button>
            <el-button type="primary" @click="handleAddImg" :loading="addImgButton">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <template v-for="(item,index) in imgfileList">
          <i :key="index">
            <img width="100" height="100" v-bind:src="item" @click="clickImg($event)">&nbsp;
          </i>

        </template>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showImg">
      <img @click="viewImg" :src="imgSrc" width="100%" height="100%"/>
    </el-dialog>
    <el-dialog :visible.sync="singedImgdialogVisible" size="tiny">   <!-- 图片点击放大 -->
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <sign-off-error ref="noArrivedSignOffError" :handleAddError="noArrivedHandleAddError"></sign-off-error>
    <sign-off-error ref="arrivedSignOffError" :handleAddError="arrivedHandleAddError"></sign-off-error>
    <sign-off-payment-confirm ref="arrivedSignOffPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-payment-confirm ref="noArrivedSignOffPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-payment-confirm ref="yztPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-error-record ref="signOffErrorRecord"></sign-off-error-record>
    <sign-off-confirm ref="noArrivedSignOffConfirm" :handleSignOffConfirm="noSignOffConfirmSuccess"></sign-off-confirm>
    <sign-off-confirm ref="arrivedSignOffConfirm" :handleSignOffConfirm="arrivedSignOffConfirmSuccess"></sign-off-confirm>
  </div>
</template>

<script>
import { resetObjNull, isEmpty, getSelectObect } from '../../lib/util.js';
import { searchTrunkTask, loadSearchTrunkTaskAgeingWarningStatic } from '../../api/stowage/TrunkTask.js';
import { search, deleteSelfExtracts, save, getSelfEctractByOrderId, saveSelfTractPictures } from '../../api/transit/selfExtract.js';
import {
  addSignOffError,
  getSignOffByOrderId
} from '../../api/stowage/SingIn.js';
import SignOffError from '../stowage/SignOffError.vue';
import SignOffErrorRecord from '../stowage/SignOffErrorRecord.vue';
import SignOffPaymentConfirm from '../stowage/SignOffPaymentConfirm.vue';
import SignOffConfirm from '../stowage/SignOffConfirm.vue';
export default{
  components: {
    SignOffError,
    SignOffErrorRecord,
    SignOffPaymentConfirm,
    SignOffConfirm
  },
  data () {
    return {
      topWarningNum: 0,
      ageingDisplay: {
        display: 'none'
      },
      imgSrc: '',
      showImg: false,
      imgfileList: [],
      noSignDaterange: [],
      arrivedSignOffDaterange: [],
      signDaterange: [],
      wddztCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      yddztCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      yztCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      token: this.$store.state.token,
      selectImageDialog: false,
      imageHtml: '',
      receiptDictValue: '',
      collectMoneyDictValue: '',
      tabType: 'yddzt',
      dialogVisible: false,
      signVerifyDialog: false,
      dialogImageUrl: '',
      awaitSign: '',
      signStatus: '',
      receipt: '',
      receiptText: '',
      orderTableData: [],
      yetOrderTableData: [],
      singedImgUrlVisiable: false, // 单据查看弹框
      singedImgdialogVisible: false, // 查看单张图片放大
      uploadImgAfterSing: {}, // 签收后上传图片表单
      selfTractPicture: [],
      addImgButton: false,
      fileList: [],
      mdata: {},
      id: null,
      imgs: null,
      selectedRow: null,
      rowData: {},
      searchForm: {
        EQ_memberUserId: '',
        LIKE_orderNumber: '',
        LIKE_sendContactName: '',
        EQ_paymentType: '',
        EQ_agingDictEntityId: '',
        LIKE_shipmentsContactName: '',
        LIKE_sendContactPhone: null,
        GT_createDate: null,
        LT_createDate: null
      },
      searchArrivedForm: {
        EQ_memberUserId: '',
        LIKE_orderNumber: '',
        LIKE_sendContactName: '',
        EQ_paymentType: '',
        EQ_agingDictEntityId: '',
        LIKE_shipmentsContactName: '',
        LIKE_sendContactPhone: null,
        GT_createDate: null,
        LT_createDate: null
      },
      searchYetForm: {
        EQ_memberUserId: '',
        LIKE_orderNumber: '',
        LIKE_sendContactName: '',
        EQ_paymentType: '',
        EQ_agingDictEntityId: '',
        LIKE_shipmentsContactName: '',
        LIKE_sendContactPhone: null,
        GT_createDate: null,
        LT_createDate: null
      },
      signJson: JSON.stringify(this.signForm),
      signData: {},
      signForm: {
        receipt: '',
        signOffDate: '',
        signOffName: '',
        signOffIDNumber: '',
        receiverName: '',
        receiverIDNumber: '',
        abnormalType: '',
        abnormalRemark: '',
        order: '',
        isSignOffAbnormal: '',
        signOffAbnormalType: '',
        signOffAbnormalTypeName: '',
        signOffAbnormalRemark: '',
        remark: ''
      },
      yetFilters: '',
      total: 0,
      currentPage: 1,
      pageSize: 10,
      yetTotal: 0,
      yetCurrentPage: 1,
      yetPageSize: 10,
      yddztTableData: [],
      yddztCurrentPage: 1,
      yddztPageSize: 10,
      yddztTotal: 0,
      arrivedSelectedItem: null,
      noArrivedSelectedItem: null,
      yetSelectedItem: null
    };
  },
  watch: {
    noSignDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchForm['GT_createDate'] = val[0].toJSON();
        this.searchForm['LT_createDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchForm['GT_createDate'] = null;
        this.searchForm['LT_createDate'] = null;
      }
    },
    arrivedSignOffDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchArrivedForm['GT_createDate'] = val[0].toJSON();
        this.searchArrivedForm['LT_createDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchArrivedForm['GT_createDate'] = null;
        this.searchArrivedForm['LT_createDate'] = null;
      }
    },
    signDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.searchYetForm['GT_createDate'] = val[0].toJSON();
        this.searchYetForm['LT_createDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.searchYetForm['GT_createDate'] = null;
        this.searchYetForm['LT_createDate'] = null;
      }
    }
  },
  methods: {
    wddztResetCondition () {
      this.noSignDaterange = [];
      this.$ue.resetObjNull(this.searchForm);
      this.resetCheckFilters(this.wddztCheckCondition);
    },
    getCheckFilters: function (o) {
      let filters = '';
      if (o.noSignIsError) {
        filters += ';GT_order.signOff.errorNum=0;';
      }
      if (o.IsCollectPaymentAmount) {
        filters += ';ISNOTNULL_order.signOff.collectPaymentAmount;';
      }
      if (o.IsReceiptWay) {
        filters += ';ISNOTNULL_order.signOff.receiptWay;';
      }
      if (o.noticeDeliveryStatus) {
        filters += ';NOTEQ_order.noticeDeliveryStatus=101022001;';
      }
      return filters;
    },
    resetCheckFilters: function (o) {
      o.IsReceiptWay = false;
      o.IsCollectPaymentAmount = false;
      o.noSignIsError = false;
      o.noticeDeliveryStatus = false;
    },
    tabClick (e) {
      if (e.name === 'yzt') {
        this.loadSearch();
      }
    },
    noSignOffConfirmSuccess (form) {
      save(this.noArrivedSelectedItem.order.id, form).then((res) => {
        this.submitLoading = false;
        if (res.data.successFlg === true) {
          this.$message.success('签收成功！');
          this.$refs.noArrivedSignOffConfirm.hide();
          this.loadSearch();
          this.searchOrderTable('');
          this.getAgeingWarningStatic();
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    arrivedSignOffConfirmSuccess (form) {
      save(this.arrivedSelectedItem.order.id, form).then((res) => {
        this.submitLoading = false;
        if (res.data.successFlg === true) {
          this.$message.success('签收成功！');
          this.$refs.arrivedSignOffConfirm.hide();
          this.loadSearch();
          this.searchYddztOrderTable('');
          this.getAgeingWarningStatic('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    handleYetCurrentChange (val) {
      this.yetSelectedItem = val;
    },
    showSignOffErrors (orderId) {
      getSignOffByOrderId(orderId).then(res => {
        if (res.data.successFlg) {
          let o = res.data.obj;
          this.$refs.signOffErrorRecord.show(o.orderNumber, o.errorNum, o.signOffErrors);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    tableRowClassName (row, index) {
      if (row.row.errorNum > 0 || (row.row.order.noticeDeliveryStatus && (row.row.order.noticeDeliveryStatus === 101022002 || row.row.order.noticeDeliveryStatus === 101022003))) {
        return 'info-row';
      } else {
        return '';
      }
    },
    tableRowClassNameToSignOff (row, index) {
      if (row.row.errorNum > 0 || (row.row.order.noticeDeliveryStatus && (row.row.order.noticeDeliveryStatus === 101022002 || row.row.order.noticeDeliveryStatus === 101022003))) {
        return 'info-row';
      } ;
      if (row.row.ageingWarning) {
        return 'info-row-ageing';
      }
      return '';
    },
    addError () {
      this.$refs.noArrivedSignOffError.show();
    },
    arrivedSignOffAddError () {
      this.$refs.arrivedSignOffError.show();
    },
    handleArrivedCurrentChange (val) {
      this.arrivedSelectedItem = val;
    },
    handleNoArrivedCurrentChange (val) {
      this.noArrivedSelectedItem = val;
    },
    noArrivedHandleAddError (form) {
      addSignOffError(this.noArrivedSelectedItem.orderId, form).then(res => {
        if (res.data.successFlg) {
          this.$message('异常登记成功！');
          this.$refs.noArrivedSignOffError.hide();
          this.searchOrderTable();
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    arrivedHandleAddError (form) {
      addSignOffError(this.arrivedSelectedItem.orderId, form).then(res => {
        if (res.data.successFlg) {
          this.$message('异常登记成功！');
          this.$refs.arrivedSignOffError.hide();
          this.searchYddztOrderTable('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    handleYddztSizeChange (size) {
      this.yddztPageSize = size;
      this.arrivedQuery();
    },
    handleYddztCurrentPageChange (page) {
      this.yddztCurrentPage = page;
      this.arrivedQuery();
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    selectImageDialogClick (val) {
      this.selectImageDialog = true;
      this.rowData = val;
      let html = '<img src=' + this.rowData.imageUrls + '/>';
      this.imageHtml = html;
    },
    yztPaymentConfirmation () {
      let o = this.yetSelectedItem.order;
      this.$refs.yztPaymentConfirm.show({
        orderId: o.id,
        orderNumber: o.orderNumber,
        paymentType: o.paymentType,
        paymentTypeName: o.paymentTypeName,
        freightPrice: o.orderPrice,
        collectPaymentAmount: o.collectPaymentAmount,
        payStatus: o.payStatus,
        collectionDeliveryStatusName: this.yetSelectedItem.collectionDeliveryStatusName
      });
    },
    noArrivedaymentConfirmation () {
      let o = this.noArrivedSelectedItem.order;
      this.$refs.noArrivedSignOffPaymentConfirm.show({
        orderId: o.id,
        orderNumber: o.orderNumber,
        paymentType: o.paymentType,
        paymentTypeName: o.paymentTypeName,
        freightPrice: o.orderPrice,
        collectPaymentAmount: o.collectPaymentAmount,
        payStatus: o.payStatus,
        collectionDeliveryStatusName: this.noArrivedSelectedItem.collectionDeliveryStatusName
      });
    },
    arrivedaymentConfirmation () {
      let o = this.arrivedSelectedItem.order;
      this.$refs.arrivedSignOffPaymentConfirm.show({
        orderId: o.id,
        orderNumber: o.orderNumber,
        paymentType: o.paymentType,
        paymentTypeName: o.paymentTypeName,
        freightPrice: o.orderPrice,
        collectPaymentAmount: o.collectPaymentAmount,
        payStatus: o.payStatus,
        collectionDeliveryStatusName: this.arrivedSelectedItem.collectionDeliveryStatusName
      });
    },
    yztResetCondition () {
      this.signDaterange = [];
      this.$ue.resetObjNull(this.searchYetForm);
      this.resetCheckFilters(this.yztCheckCondition);
    },
    searchYetTableClick () {
      let str = [];
      for (let p in this.searchYetForm) {
        if (!isEmpty(this.searchYetForm[p])) {
          let type = p.split('_');
          str.push(type[0] + '_order.' + type[1] + '=' + this.searchYetForm[p]);
        }
      }
      let filters = str.join(';');
      filters += this.getCheckFilters(this.yztCheckCondition);
      this.loadSearch(filters);
    },
    /**
       * 取消签收
       */
    cancelSignOff () {
      this.$confirm('是否要取消这些数据的签收？', '提示', {
        type: 'warning'
      }).then(() => {
        deleteSelfExtracts([this.yetSelectedItem.id]).then((res) => {
          if (res.data.successFlg) {
            this.$message.success('取消成功!');
            this.searchOrderTable();
            this.searchYddztOrderTable();
            this.getAgeingWarningStatic();
            this.loadSearch();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    handleAvatarSuccess (res, file) {
      if (res.successFlg) {
        this.$message.success('签收成功');
        this.searchOrderTable('');
        this.getAgeingWarningStatic('');
        this.signVerifyDialog = false;
      } else {
        this.$message.error('签收异常');
      }
    },
    createSignBtn () {
      let signForms = [];
      this.signForm.signOffAbnormalTypeName = getSelectObect(this.signForm.signOffAbnormalType, 'dictVal', this.$store.getters.SIGNOFF_EXCEPTION_TYPE).cnDictValname;
      this.signForm.order = this.noArrivedSelectedItem.order;
      signForms.push(this.signForm);
      this.signData.json_data = JSON.stringify(signForms);
      this.$refs['signForm'].validate((signFormValid) => {
        if (signFormValid) {
          if (this.$refs.upload.uploadFiles.length > 0) {
            this.$refs.upload.submit();
          } else {
            save(JSON.stringify(signForms)).then((res) => {
              if (res.data.successFlg) {
                this.$message.success('签收成功');
                this.searchOrderTable('');
                this.getAgeingWarningStatic('');
                this.signVerifyDialog = false;
              } else {
                this.$message.error('签收异常');
              }
            });
          }
        }
      });
    },
    handleRemove (file, fileList) {
      this.fileList.pop(file);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = false;
    },
    arrivedReset () {
      this.arrivedSignOffDaterange = [];
      this.$ue.resetObjNull(this.searchArrivedForm);
      this.resetCheckFilters(this.yddztCheckCondition);
    },
    arrivedQuery () {
      let str = [];
      for (let p in this.searchArrivedForm) {
        if (!isEmpty(this.searchArrivedForm[p])) {
          let type = p.split('_');
          str.push(type[0] + '_order.' + type[1] + '=' + this.searchArrivedForm[p]);
        }
      }
      let filters = str.join(';');
      filters += this.getCheckFilters(this.yddztCheckCondition);
      this.searchYddztOrderTable(filters);
      this.getAgeingWarningStatic(filters);
    },
    arrivedSignVerifyClick () {
      let o = this.arrivedSelectedItem.order;
      let receiptWay = (o.receipt === '原件回单' ? 101002004 : '');
      this.$refs.arrivedSignOffConfirm.show(o.paymentType, o.collectPaymentAmount, o.payStatus, receiptWay);
    },
    signVerifyClick () {
      let o = this.noArrivedSelectedItem.order;
      let receiptWay = (o.receipt === '原件回单' ? 101002004 : '');
      this.$refs.noArrivedSignOffConfirm.show(o.paymentType, o.collectPaymentAmount, o.payStatus, receiptWay);
    },
    resetObjNull (val) {
      resetObjNull(val);
    },
    searchTableClick () {
      let str = [];
      for (let p in this.searchForm) {
        if (!isEmpty(this.searchForm[p])) {
          let type = p.split('_');
          str.push(type[0] + '_order.' + type[1] + '=' + this.searchForm[p]);
        }
      }
      let filters = str.join(';');
      filters += this.getCheckFilters(this.wddztCheckCondition);
      this.searchOrderTable(filters);
      this.getAgeingWarningStatic(filters);
    },
    searchOrderTable (filters = '') {
      this.loadSearchTrunkTask('IN_nextOrganizationExecuteTypeId=105001002;GT_order.orderStatus=101001003;EQ_order.sendType=105001002;EQ_order.isArrived=false;' + filters, this.pageSize, this.currentPage, res => {
        this.orderTableData = res.data.detailModelList;
        this.total = res.data.totalCount;
      });
    },
    // 未签收告警
    getAgeingWarningStatic (filters = '') {
      let newFilters = 'IN_nextOrganizationExecuteTypeId=105001002;GT_order.orderStatus=101001003;EQ_order.sendType=105001002;' + filters;
      loadSearchTrunkTaskAgeingWarningStatic({filters: newFilters}).then(result => {
        if (result.data.successFlg) {
          if (result.data.obj > 0) {
            this.ageingDisplay.display = 'block';
            this.topWarningNum = result.data.obj;
          } else {
            this.topWarningNum = 0;
            this.ageingDisplay.display = 'none';
          }
        } else {
          this.$message.error(result.data.errorMsg);
        };
      });
    },
    searchYddztOrderTable (filters = '') {
      this.loadSearchTrunkTask('IN_nextOrganizationExecuteTypeId=105001002;EQ_order.sendType=105001002;EQ_order.isArrived=true;' + filters, this.yddztPageSize, this.yddztCurrentPage, res => {
        this.yddztTableData = res.data.detailModelList;
        this.yddztTotal = res.data.totalCount;
      });
    },
    loadSearch (filters = '') {
      search({
        filters: filters,
        sorts: '-createDate',
        size: this.yetPageSize,
        page: this.yetCurrentPage
      }).then((res) => {
        if (res.data.successFlg) {
          this.yetOrderTableData = res.data.detailModelList;
          this.yetTotal = res.data.totalCount;
        }
      });
    },
    loadSearchTrunkTask (filters = '', size, page, callback) {
      searchTrunkTask({
        filters: filters,
        sorts: '-createDate',
        size: size,
        page: page
      }).then((res) => {
        if (res.data.successFlg) {
          callback(res);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    // 第几页操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableClick();
    },
    // 每页几条操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableClick();
    },
    // 第几页操作
    yetHandleSizeChange (val) {
      this.yetPageSize = val;
      this.searchYetTableClick();
    },
    // 每页几条操作
    yetHandleCurrentChange (val) {
      this.yetCurrentPage = val;
      this.searchYetTableClick();
    },
    clickImg (e) {
      this.showImg = true;
      this.imgSrc = e.currentTarget.src;
    },
    viewImg () {
      this.showImg = false;
    },
    // 查看单据记录
    showImageUrls (row) {
      this.fileList = [];
      this.imgfileList = [];
      this.selectedRow = row;
      this.singedImgUrlVisiable = true;
      getSelfEctractByOrderId(row.order.id).then((res) => {
        if (res.data.successFlg) {
          if (res.data.obj !== '') {
            this.imgfileList = res.data.obj.split(',');
          } else {
            this.$message({
              message: '该订单暂无单据记录！',
              type: 'warning'
            });
          }
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    canaleAddImg () {
      this.$confirm('确定取消单据上传？', '提示', {
        type: 'warning'
      }).then(() => {
        for (var item in this.fileList) {
          this.fileList.pop(item);
        }
        this.singedImgUrlVisiable = false;
      });
    },
    handlePreview (file) {
      this.fileList.push(file.obj);
    },
    handleAddImg () {
      if ((this.fileList.length + this.imgfileList.length) > 5) {
        this.$message({
          message: '图片总数大于5张！',
          type: 'error'
        });
      } else if (this.fileList.length < 1) {
        this.$message({
          message: '请选择一张图片！',
          type: 'warning'
        });
      } else {
        this.addImgButton = true;
        saveSelfTractPictures(this.selectedRow.order.id, this.fileList.join(',')).then((res) => {
          if (res.data.successFlg === true) {
            this.addImgButton = false;
            this.$message.success('保存/修改成功！');
            this.singedImgUrlVisiable = false;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        }).catch(function (error) {
          console.log(error);
        });
      }
    }
  },
  mounted () {
    this.searchOrderTable();
    this.searchYddztOrderTable();
    this.getAgeingWarningStatic();
    this.loadSearch();
    this.$store.commit('initOrganizations');
    this.$store.commit('initDict');
  }
};
</script>
